<template>
	<view style="height: 180rpx;">
		<view class="content">
			<view class="tabber_box">
				<view v-for="(item,index) in tabBars" :key="index"
					:style="{width:`${ratio}%`,display:'flex',justifyContent:'space-around',margin: '24rpx 0'}">
					<view class="tabber_item" @click="onNav(item.pagePath)">
						<image :src="currentPath === item.pagePath ? item.iconPath : item.selectedIconPath"></image>
						<text
							:style="{color:currentPath === item.pagePath ? item.selectedColor : item.color}">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentPath: {
				type: String,
				default: '/pages/index/index',
			}
		},
		data() {
			const color = '#8F543F';
			const selectedColor = '#FF2945';
			return {
				tabBars: [{
						name: '融资',
						iconPath: '../../static/tabbar/selectd_rz_icon.png',
						selectedIconPath: '../../static/tabbar/rz_icon.png',
						pagePath: '/pages/index/index',
						color,
						selectedColor,
					},
					// {
					// 	name: '车源',
					// 	iconPath: '../../static/tabbar/selectd_car_icon.png',
					// 	selectedIconPath: '../../static/tabbar/car_icon.png',
					// 	pagePath: '/pages/carSource/index',
					// 	color,
					// 	selectedColor,
					// },
					{
						name: '我的',
						iconPath: '../../static/tabbar/selectd_user_icon.png',
						selectedIconPath: '../../static/tabbar/user_icon.png',
						pagePath: '/pages/my/index',
						color,
						selectedColor,
					}
				],
				ratio: 0,
			}
		},
		mounted() {
			this.ratio = 100 / this.tabBars.length;
			uni.hideTabBar(); // 隐藏tabbar
		},
		methods: {
			onNav(url) {
				if (this.currentPath !== url) uni.switchTab({
					url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>